<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>共享车位</title>
  <link rel="stylesheet" href="mobile/layui/css/layui.mobile.css">
  <link rel="stylesheet" href="mobile/layui/css/layui.css">
  <link rel="stylesheet" href="mobile/css/yj_css.css">
  <link rel="stylesheet" href="mobile/layer/mobile/need/layer.css">
</head>
<body>
  <header class="yj-header">
    <a href="javascript:history.go(-1)" class="yj-header-return layui-icon">&#xe603;</a>
    <span>车位</span>
    <a class="yj-header-meau"></a>
  </header>

  <div class="yj-content yj-mar-footer">
    <div class="yj-goods-attr-title yj-fixedTop-main">
      <a class="yj-active yj-tab1" onclick="tab('yj-goods-attr',1)"><span>商品</span></a>
      <a class="yj-tab2" onclick="tab('yj-goods-attr',2)"><span>评论</span></a>
      <a class="yj-tab3" onclick="tab('yj-goods-attr',3)"><span>详情</span></a>
    </div>
    <div class="yj-goods-detail-box">
      <div class="yj-goods-attr1">
        <div class="yj-goods-info">
          <!-- banner -->
            <link rel="stylesheet" href="mobile/css/swiper.min.css">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="mobile/images/gongxiang.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="mobile/images/sayno.jpg" alt=""></div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
            <script src="mobile/js/swiper.min.js"></script>
            <script>
                var swiper = new Swiper('.swiper-container', {
                    loop:true,
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    }
                });
            </script>
          <!-- banner end -->
          <div class=" yj-bgfff">

      </div>
      <div class="yj-goods-attr2 yj-none">
        <!-- 线性title -->
        <div class="yj-line-title yj-bgfff">
          <div class="yj-bgfff yj-line-title-container">
            <span class="yj-line-title-text yj-bgfff">
              <span class="layui-badge-dot"></span>
              <font class=""><img class="yj-title-icon" src="mobile/images/tb3.png">
              车位评论</font>
              <span class="layui-badge-dot"></span>
            </span>
          </div>
        </div>
        <div class="yj-goods-parameter yj-pad-lr yj-bgfff yj-border-t" id="commentsAndReplies">
         <button onclick="addComment()">添加评论</button>

        </div>

      </div>

       <!--弹出框-->
        <div id="addCommentDiv" title="添加评论" style="display: none;padding: 40px 40px;">
          <form action="comment/addComment" id="addForm" enctype="multipart/form-data" method="post">
            <table>
              <tr>
                <td>评论内容:</td>
                <td>
                  <textarea id="commentContent" name="cpcContent" style="width: 100px;height: 60px"></textarea>
                </td>
              </tr>
              <tr>
                <td>选择图片:</td>
                <td class="pn-fcontent" colspan="2">
                  <input type="file" id="pic" name="files">
                </td>
              </tr>
              <tr>
                <td>评分:</td>
                <td id="starScore"></td>
              </tr>
              <tr>
                <td><input type="hidden" id="cId" name="cId"></td>
                <td><input type="hidden" id="getScore" name="cpcScore"></td>
              </tr>
            </table>
          </form>
        </div>
      <div class="yj-goods-attr3 yj-none">
        <!-- 线性title -->
        <div class="yj-line-title yj-bgfff">
          <div class="yj-bgfff yj-line-title-container">
            <span class="yj-line-title-text yj-bgfff">
              <span class="layui-badge-dot"></span>
              <font class=""><img class="yj-title-icon" src="mobile/images/tb2.png">
              产品参数</font>
              <span class="layui-badge-dot"></span>
            </span>
          </div>
        </div>
        <div class="yj-goods-parameter yj-pad-lr yj-bgfff yj-border-t">
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title" >姓名</span><span id="uName"></span></p>
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title">联系方式</span><span id="uTel"></span></p>
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title" >车位地址</span><span id="carAddress"></span></p>
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title">所在小区</span><span id="comName"></span></p>
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title">车位号</span><span id="uCard"></span></p>
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title">价格</span><span id="cPrice"></span></p>
          <p class="yj-goods-parameter-item" ><span class="yj-goods-parameter-title">截止时间</span><span id="cDurationEnd"></span></p>
        </div>
      </div>
    </div>

  </div>

      </div>


      </div>


    </div>
  </div>
  <div class="yj-goods-footer">
    <a class="yj-goods-footer-index" href="carIndex">
      <span class="yj-footer-icon"><img src="mobile/images/home.png"></span>
      <p class="yj-footer-title">首页</p>
    </a>
    <span class="yj-goods-footer-buy"><button class="yj-goods-footer-buy-btn" id="GrabSingle">抢单</button></span>
  </div>

  <div class="yj-mask-body" onclick="maskOut()"></div>
  </div>
  <script th:src="@{/mobile/layui/layui.js}"></script>
  <script src="mobile/js/jquery.min.js"></script>
  <script src="mobile/js/yj_js.js"></script>
  <script th:inline="javascript">
    var url = [[@{/}]];
        layui.use("layer", function () {
          var layer = layui.layer;
        });
      function getQueryVariable(variable)
      {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
          var pair = vars[i].split("=");
          if(pair[0] == variable){return pair[1];}
        }
        return(false);
      }

  </script>
  <script>
    $(document).ready(function () {
      var id = getQueryVariable("id");
      var carpark;
      $.ajax({
        url: url + "lessor/findCarParkById?id="+id,
        success:function (result) {
          var carPark = result.result;
          carpark = carPark;
          console.log(carpark);
          $(".cPic").attr("src", carPark.cPic);
          $("#carParkImg").attr("src", carPark.cPic);
          $("#carAddress").append(carPark.cAddress);
          $("#uName").append(carPark.userInfo.uName);
          $("#comName").append(carPark.community.comName);
          $("#uCard").append(carPark.userInfo.uCard);
          $("#uTel").append(carPark.userInfo.uTel);
          $("#cDurationEnd").append(carPark.cDurationEnd);
          $("#cPrice").append(carPark.cPrice);
        }
      })

      //抢单
      $("#GrabSingle").click(function () {
        var fd = new FormData(carpark);
        $.ajax({
          url:url+"alipay/createOrderNumber",
          type:"post",
          data:{
            id:id,
            cPrice:$("#cPrice").html(),
            cAddress:$("#carAddress").html(),
            'userInfo.uName':$("#uName").html(),
          },
          success:function (result) {
              message = result.msg;
              if (result.code == 200){
                location.href="order_confirm.html?id="+id;
              }else if(message == "对不起，您手慢了"){
                layer.msg(result.msg,{icon:5,time:2000,anim:1});
              } else if(message == "您有订单正在进行，是否前往查看"){
                layer.confirm(message, {
                  btn: ['前往','取消'] //按钮
                }, function(){
                  location.href="order.html";
                }, function(){

                });
              }
          }

        })

      })
      });


  </script>
  <script src="mobile/js/jquery.min.js"></script>
  <script src="mobile/js/jQuery.form.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    var cId = getQueryVariable("id");
    $.ajax({
      url:url+"/comment/allCommentsAndReply?cId="+cId,
      success:function (result) {
        //评论
        var comments=result.result;
        for (var i=0;i<comments.length;i++){
          var comment=comments[i];
          var tab=$("<div></div>");
          var tr1=$("<div></div>");
          var tr2=$("<div></div>");
          var tr3=$("<div></div>");
          var tr4 = $("<div></div>");
          var tr5=$("<div></div>");
          var tr9=$("<div></div>");
          var tr10=$("<div></div>");
          var uName=$("<span></span>").text(comment.uName);
          var cpcTime=$("<span></span>").text(comment.cpcTime);
          var cpcContent=$("<span></span>").text(comment.cpcContent);
          var operation=$("<span></span>");
          var cpcPic=$("<span></span>");
          var addReply=$("<button onclick='addReply("+comment.cpcId+','+comment.uId+")'>回复</button>");
          var deleteComment=$("<button onclick='deleteComment("+comment.cpcId+")'>撤回</button>");
          var pic=$("<image src='upload/"+comment.cpcPic+"' style='height: 160px;width: 150px'>");
          var cutOff=$("<span></span>").text("---------------------------------------");
          var cutOffTop=$("<span></span>").text("<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<");
         // var starNum = $("<span id='starNumber"+comment.uId+"'></span>").val(comment.cpcScore);
          var starNum=$("<button onclick='addStar("+comment.cpcScore+")'>查看评分</button>");
            //addStar(comment.uId);
          operation.append(addReply);
          operation.append(deleteComment);
          cpcPic.append(pic);
          tr1.append(uName);
          tr2.append(cpcTime);
          tr3.append(cpcContent);
          tr3.append(operation);
          tr5.append(cpcPic);
          tr4.append(starNum);
          tr9.append(cutOff);
          tr10.append(cutOffTop);
          tab.append(tr10);
          tab.append(tr1);
          tab.append(tr2);
          tab.append(tr3);
          tab.append(tr5);
          tab.append(tr4);
          tab.append(tr9);
          $("#commentsAndReplies").append(tab);



          //对应回复
          var replies=comment.replies;
          for (var j=0;j<replies.length;j++){
            var reply=replies[j];
            var tab1=$("<div></div>");
            var tr6=$("<div></div>");
            var tr7=$("<div></div>");
            var tr8=$("<div></div>");
            var Tname=$("<span></span>").text(reply.cpcrTname);
            var nbsp=$("<span>&nbsp;&nbsp;</span>");
            var text=$("<span></span>").text("回复");
            var nbsp1=$("<span>&nbsp;&nbsp;</span>");
            var Bname=$("<span></span>").text(reply.cpcrBname);
            /*var nbsp2=$("<td>&nbsp;</td>");*/
            var cpcrTime=$("<span></span>").text(reply.cpcrTime);
            var cpcrContent=$("<span></span>").text(reply.cpcrContent);
            var operationReply=$("<span></span>");
            var addReplyToReply=$("<button onclick='addReply("+comment.cpcId+','+reply.cpcrTo+")'>回复</button>");
            var deleteReply=$("<button onclick='deleteReply("+reply.cpcrId+")'>撤回</button>");

            operationReply.append(addReplyToReply);
            operationReply.append(deleteReply);

            tr6.append(Tname);
            tr6.append(nbsp);
            tr6.append(text);
            tr6.append(nbsp1);
            tr6.append(Bname);
            /*tr6.append(nbsp2);*/
            tr7.append(cpcrContent);
            tr7.append(operationReply);
            tr8.append(cpcrTime);
            tab1.append(tr6);
            tab1.append(tr8);
            tab1.append(tr7);

            $("#commentsAndReplies").append(tab1);
          }

        }
      }
    })
  })

  //评分星星
  function addStar(cpcScore) {
    layui.use('rate', function () {
      var rate = layui.rate;

      //渲染
      var ins1 = rate.render({
        elem: '#addStars'  //绑定元素
        , length: 5
        , value: cpcScore
        , readonly: true
      });
    });
      layer.open({
          type: 1,
          area: ['250px', '150px'],
          shadeClose: true, //点击遮罩关闭
          content: $('#addStars'),
          end: function () {
            $("#addStars").hide();
          }
      });

  }
  //添加评论
  function addComment() {
    var id = getQueryVariable("id");
    $("#cId").val(id);
    var index =layer.open({
      title: ['添加评论', 'font-size:18px;text-align:center;'],
      type: 1,
      area: ['400px', '270px'], //宽高
      //弹出对应id的html页面addScheduleDiv
      content: $('#addCommentDiv'),
      shade:0,
      zIndex:3,
      btn: ["确认", "取消"],
      //点击确认执行的方法
      yes: function (index, layero) {
        //要提交的ajax
        var option = {
          url : url+'comment/addComment',
          type : 'POST',
          dataType : 'json',
          success : function(data) {
            var msg="";
            if (data.msg == "评论成功") {
              msg="评论成功！";

            }else{
              msg="评论失败！";
            }
            layer.msg(msg);
            //清空输入框
            $("#commentContent").val("");
            $("#pic").val("");
            $("#cId").val("");
            $("#cpcScore").val("");
            //关闭弹出层
            layer.close(index);
          },
          end: function () {
            $("#addCommentDiv").hide();
          }
        };
        //提交
        $("#addForm").ajaxSubmit(option);

        setTimeout(function(){
          window.location.reload();
        },1000);
      },
      end: function () {
        $("#addCommentDiv").hide();
      }
    });
    layui.use('rate', function () {
      var rate = layui.rate;

      //渲染
      var ins1 = rate.render({
        elem: '#starScore'  //绑定元素
        , length: 5
        , value: 0
        , readonly: false
        , choose: function(value){
          $("#getScore").val(value);
        }
      });
    });
  }
  //回复
  function addReply(cpcId,uId) {
    layer.prompt({
      formType: 2,
      value: '请输入回复内容',
      title: '回复',
      area: ['300px', '200px'] //自定义文本域宽高
    }, function(value, index, elem){
      //alert(value); //得到value
     var cpcrContent=value;
     $.ajax({
       url:url+"CommentReply/addReply",
       type:"post",
       data:{
         cpcId:cpcId,
         cpcrBy:uId,
         cpcrContent:cpcrContent
       },
       success:function (result) {
         if (result.msg=="回复成功"){
           layer.msg(result.msg, {icon: 6});
           setTimeout(function(){
             window.location.reload();
           },2000);
         }else {
           layer.msg(result.msg, {icon: 5});
         }
       }
     })
      layer.close(index);
    });
  }
  //撤回评论（及对应的回复）
  function deleteComment(cpcId) {
    $.ajax({
      url:url+"comment/deleteComment",
      type:"post",
      data:{
        cpcId:cpcId
      },
      success:function (result) {
        if (result.msg=="撤回成功"){
          layer.msg(result.msg, {icon: 6});
          setTimeout(function(){
            window.location.reload();
          },2000);
        }else {
          alert(result.msg);
        }
      }
    })
  }
  //撤回回复
  function deleteReply(cpcrId) {
    $.ajax({
      url:url+"CommentReply/deleteReply",
      type:"post",
      data:{
        cpcrId:cpcrId
      },
      success:function (result) {
        if (result.msg=="撤回成功"){
          layer.msg(result.msg, {icon: 6});
          setTimeout(function(){
            window.location.reload();
          },2000);
        }else {
          alert(result.msg);
        }
      }
    })
  }

</script>
  <div id="addStars" title="评分" style="display: none;padding: 40px 40px;"></div>
</body>
</html>